<script lang="ts" setup>
import { computed, ref } from 'vue';
import { ArrowDownBold, RemoveFilled, CirclePlusFilled } from '@element-plus/icons-vue';
import { ServiceUrl } from '../../../utils/types';
import { genKey, protocols } from '../../../utils';

const cls = 'ui-api-editor-service-config-url'

const props = defineProps<{ modelValue: ServiceUrl }>()

const itemsVisible = ref(false)

const canRemove = computed(() => (props.modelValue.apiServer || []).length > 1)

const addItem = (index: number) => {
  props.modelValue.apiServer.splice(index + 1, 0, { _k: genKey() })
}

const removeItem = (index: number) => {
  props.modelValue.apiServer.splice(index, 1)
}

const toggleItems = () => {
  itemsVisible.value = !itemsVisible.value
  itemsVisible.value && props.modelValue.apiServer.length < 1 && addItem(-1)
}
</script>

<template>
  <div :class="cls">
    <div :class="`${cls}_box`">
      <ElInput v-model="props.modelValue.originalPath">
        <template #prepend>
          <ElSelect style="width: 100px;" v-model="props.modelValue.protocol">
            <ElOption v-for="_ in protocols" :key="_" :value="_" />
          </ElSelect>
        </template>
      </ElInput>
      <ElForm v-if="itemsVisible && props.modelValue.apiServer" inline label-suffix=":">
        <ul :class="`${cls}_items`">
          <li v-for="(_, i) in props.modelValue.apiServer" :key="_._k">
            <ElFormItem label="节点地址">
              <ElInput v-model="_.host" />
            </ElFormItem>
            <ElFormItem label="端口">
              <ElInputNumber style="width: 100px;" controls-position="right" :min="1" :max="65535" v-model="_.port" />
            </ElFormItem>
            <ElFormItem label="权重">
              <ElInputNumber style="width: 100px;" controls-position="right" :min="0" v-model="_.weight" />
            </ElFormItem>
            <ElFormItem :class="`${cls}_btns`">
              <ElLink :underline="false" @click="addItem(i)">
                <ElIcon size="20">
                  <CirclePlusFilled />
                </ElIcon>
              </ElLink>
              <ElLink v-if="canRemove" :underline="false" type="warning" @click="removeItem(i)">
                <ElIcon size="20">
                  <RemoveFilled />
                </ElIcon>
              </ElLink>
            </ElFormItem>
          </li>
        </ul>
      </ElForm>
      <div :class="`${cls}_tip`">
        1、包含domain内容<br>
        2、路径中支持的字符：大小写字母、数字、和 - _ * . / ~ % 符号<br>
        3、Path类型的请求参数必须以{}包裹，作为独立部分包含在路径中（示例：/{param}/）
      </div>
    </div>
    <ElButton :class="`${cls}_btn_config`" type="primary" link @click="toggleItems">
      {{ `${itemsVisible ? '收起' : '显示'}高级配置` }}
      <ElIcon :class="['el-icon--right', { 'is-expand': itemsVisible }]">
        <ArrowDownBold />
      </ElIcon>
    </ElButton>
  </div>
</template>

<style lang="scss">
.ui-api-editor-service-config-url {
  width: 100%;
  max-width: 800px;
  display: flex;
  align-items: flex-start;
  &_box {
    flex: 1;
    width: 0;
  }
  &_btn_config {
    padding: 8px !important;
    .el-icon {
      transition: transform .2s;
      &.is-expand {
        transform: rotate(180deg);
      }
    }
  }
  &_items {
    padding: 15px 5px;
    background-color: var(--el-fill-color-light);
    > li {
      display: flex;
      align-items: center;
      list-style: none;
      &:not(:last-child) {
        margin-bottom: 10px;
      }
      > :first-child {
        flex: 1;
        width: 0;
      }
      .el-form-item {
        margin-right: 10px !important;
        &:last-child {
          margin-right: 0 !important;
        }
      }
    }
  }
  &_tip {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--el-text-color-secondary);
  }
  &_btns .el-form-item__content {
    > * + * {
      margin-left: 3px;
    }
  }
}
</style>
